<template>
  <div 
    class="content-block"
    :class="{
      'selected': isSelected,
      'preview-mode': previewMode,
      [`animation-${block.animation}`]: block.animation !== 'none'
    }"
    :style="blockStyle"
    @click="selectBlock"
  >
    <!-- 删除按钮 -->
    <div v-if="!previewMode && isSelected" class="delete-button">
      <el-button @click.stop="$emit('delete', index)" type="danger" title="删除" size="small" circle>
        <el-icon><Close /></el-icon>
      </el-button>
    </div>

    <!-- 内容渲染区域 -->
    <component 
      :is="getBlockComponent(block.type)"
      :block="block"
      :preview-mode="previewMode"
      @update="handleUpdate"
    />

    <!-- 拖拽手柄 -->
    <div v-if="!previewMode" class="drag-handle" title="拖拽移动">
      <el-icon><Rank /></el-icon>
    </div>
  </div>
</template>

<script setup>
import { computed, inject } from 'vue'
import { 
  CopyDocument, 
  ArrowUp, 
  ArrowDown, 
  Close, 
  Rank 
} from '@element-plus/icons-vue'
import TextBlock from './blocks/TextBlock.vue'
import CardBlock from './blocks/CardBlock.vue'
import MapBlock from './blocks/MapBlock.vue'
import ImageBlock from './blocks/ImageBlock.vue'

// Props
const props = defineProps({
  block: {
    type: Object,
    required: true
  },
  index: {
    type: Number,
    required: true
  },
  previewMode: {
    type: Boolean,
    default: false
  }
})

// Emits
const emit = defineEmits(['update', 'delete', 'duplicate', 'select'])

// 注入选中状态
const selectedBlockId = inject('selectedBlockId', null)

// 计算属性
const isSelected = computed(() => {
  return selectedBlockId?.value === props.block.id
})

const blockStyle = computed(() => {
  const style = props.block.style || {}
  return {
    backgroundColor: style.backgroundColor || 'transparent',
    borderRadius: `${style.borderRadius || 8}px`,
    padding: `${style.padding || 16}px`,
    margin: `${style.margin || 8}px 0`,
    boxShadow: style.shadow ? '0 4px 12px rgba(0, 0, 0, 0.1)' : 'none',
    transition: 'all 0.3s ease'
  }
})

/**
 * 获取对应的块组件
 * @param {string} type - 块类型
 * @returns {Component} Vue组件
 */
const getBlockComponent = (type) => {
  const components = {
    text: TextBlock,
    card: CardBlock,
    map: MapBlock,
    image: ImageBlock
  }
  return components[type] || TextBlock
}

/**
 * 选中当前块
 */
const selectBlock = () => {
  if (!props.previewMode) {
    emit('select', props.block)
  }
}

/**
 * 处理内容更新
 * @param {object} updatedContent - 更新的内容
 */
const handleUpdate = (updatedContent) => {
  const updatedBlock = {
    ...props.block,
    ...updatedContent
  }
  emit('update', props.index, updatedBlock)
}

/**
 * 向上移动块
 */
const moveUp = () => {
  if (props.index > 0) {
    emit('move', props.index, props.index - 1)
  }
}

/**
 * 向下移动块
 */
const moveDown = () => {
  emit('move', props.index, props.index + 1)
}
</script>

<style scoped>
.content-block {
  position: relative;
  margin-bottom: 0;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 60px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: none;
  overflow: hidden;
}

.content-block:hover:not(.preview-mode) {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  border-color: rgba(64, 158, 255, 0.3);
}

.content-block.selected {
  border-color: #409eff;
  box-shadow: 0 8px 32px rgba(64, 158, 255, 0.3), 0 0 0 4px rgba(64, 158, 255, 0.1);
  transform: translateY(-2px);
}

.content-block.selected::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #409eff, #67c23a);
  z-index: 10;
}

.content-block.preview-mode {
  cursor: default;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 0;
  transform: none;
}

.content-block.preview-mode:hover {
  transform: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.delete-button {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 9999;
}

.delete-button :deep(.el-button) {
  width: 32px;
  height: 32px;
  background: #e74c3c !important;
  background-color: #e74c3c !important;
  color: #ffffff !important;
  border: 2px solid #c0392b !important;
  border-color: #c0392b !important;
  box-shadow: 0 3px 8px rgba(231, 76, 60, 0.4) !important;
  transition: all 0.2s ease !important;
}

.delete-button :deep(.el-button:hover) {
  background: #c0392b !important;
  background-color: #c0392b !important;
  color: #ffffff !important;
  border: 2px solid #a93226 !important;
  border-color: #a93226 !important;
  transform: scale(1.1) !important;
  box-shadow: 0 5px 12px rgba(192, 57, 43, 0.6) !important;
}

.delete-button :deep(.el-button .el-icon) {
  font-size: 16px !important;
}

.drag-handle {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  background: linear-gradient(145deg, rgba(64, 158, 255, 0.9), rgba(51, 126, 204, 0.9));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: grab;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.content-block:hover .drag-handle {
  opacity: 1;
  transform: scale(1.1);
}

.drag-handle:active {
  cursor: grabbing;
  transform: scale(0.95);
}

.drag-handle .el-icon {
  font-size: 16px;
}

/* 动画效果 */
.animation-fadeIn {
  animation: fadeIn 0.6s ease-out;
}

.animation-slideIn {
  animation: slideIn 0.6s ease-out;
}

.animation-zoomIn {
  animation: zoomIn 0.6s ease-out;
}

.animation-bounceIn {
  animation: bounceIn 0.8s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .block-toolbar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    right: auto;
  }
  
  .drag-handle {
    display: none;
  }
}
</style>